<template>
	<view class="user-order">
		<tabs :active="active" @change="changeShow" :config="{itemWidth: 180}">
			<tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
				<!-- <order-list v-if="item.isShow" :order-type="item.type" :ref="'order' + item.type"></order-list> -->
				<view class="all">
					<!-- <view class="list" @click="toxq(items.title,items.price,items.order_sn,items.order_status)"
						v-for="(items,indexs) in list" :key="indexs">
						<view class="list_top">
							<image src="../../static/images/icon_like.png" mode=""></image>
							<view class="list_right">
								<view class="ltop">
									<p style="color: #000000;font-size: 30rpx;">{{items.title}}</p>
									<p style="color: #20bf50;ffont-size: 30rpx;">{{item.name}}</p>
								</view>
								<view class="lbot">
									<p style="color: #ED1C24;font-size: 35rpx; font-weight: bold;">+{{items.price}}</p>
									<p style="color: #CCCCCC;font-size: 30rpx;">订单编号:{{items.order_sn}}</p>
								</view>
							</view>
						</view>
						<view class="time" v-show="items.time?true:false">
							<p style="color: #CCCCCC;font-size: 35rpx;margin-top: 20rpx;">
								<text style="color: #F43F3B;">剩余时间</text>
								<u-count-down  :timestamp="items.time" color="#F43F3b">
								</u-count-down>
							</p>
						</view>
					</view> -->
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="lists"
							@click="todetails(item.video_url,item.content,item.title,item.id,item.price,item.cid)">
							<image :src="imgs" mode=""></image>
							<view class="task_text">
								<p style="font-size: 35rpx;font-weight: bold;color: #000000;">{{item.title}}</p>
								<p class="p1">{{item.content}}</p>
							</view>
							<button
								style="background-color:#FF2C3C;color: #FFFFFF; height: 50rpx;line-height: 50rpx;width: 100rpx;">+{{item.price}}</button>
						</view>
						<view class="type">
							<view class="type_text1">
								任务分类:{{item.type}}
							</view>
							<view class="type_text2">
								任务名额:{{item.max_num}}
							</view>
						</view>
					</view>
				</view>
			</tab>
		</tabs>
		<!-- <float-tab></float-tab> -->
	</view>
</template>

<script>
	import {
		taskType
	} from '@/utils/type';
	import {
		waitSubmit
	} from '@/api/user';
	import {
		auditLists
	} from '@/api/user';
	import {
		ALLlists
	} from '@/api/user';
	import {
		through
	} from '@/api/user';
	import {
		unthrough
	} from '@/api/user';
	import {
		timeToDate
	} from '@/utils/wechath5.js';
	export default {
		data() {
			return {
				active: taskType.SUB,
				order: [{
						name: '全部',
						type: taskType.SUB,
						isShow: false
					},
					// {
					//      name: '待付款',
					//      type: orderType.PAY,
					//      isShow: false
					//    }, 
					{
						name: '抖音',
						type: taskType.EXAMINE,
						isShow: false
					},
					{
						name: '西瓜',
						type: taskType.ADOPT,
						isShow: false
					},
					{
						name: '今日',
						type: taskType.FAIL,
						isShow: false
					},
					// {
					//      name: '已关闭',
					//      type: orderType.CLOSE,
					//      isShow: false
					//    },
				],
				list: [],
				times: "",
				time: "3600",
				index: 0,
				imgs: "",
				aaa: "",
			};
		},

		components: {},
		props: {},
		onShow() {
			this.changeShow(this.index);
			this.aaa = uni.getStorageSync('status');
			console.log(this.aaa)
			if (this.aaa) {
				this.imgs = "../../static/images/yun.png"
				console.log(this.imgs)
			} else {
				this.imgs = "../../static/images/my_portrait_empty.png"
				console.log(this.imgs)
			}


		},
		onLoad: function(options) {
			// const {
			// 	order
			// } = this
			// let type = options.type || orderType.ALL;
			// this.index = order.findIndex(item => item.type == type)
			this.changeShow(this.index);
			// uni.getStorageSync({
			//     key: 'status',
			//     success: function (res) {

			//       
			//     }
			// });
			this.aaa = uni.getStorageSync('status');
			console.log(this.aaa)
			if (this.aaa) {
				this.imgs = "../../static/images/yun.png"
				// console.log(this.imgs)
			} else {
				this.imgs = "../../static/images/my_portrait_empty.png"
				// console.log(this.imgs)
			}
		},

		// onPullDownRefresh: function() {
		// 	const {
		// 		active,
		// 		order
		// 	} = this
		// 	console.log(this.$refs['order' + order[active].type])
		// 	this.$refs['order' + order[active].type][0].reflesh()
		// },

		// onReachBottom: function() {
		// 	const {
		// 		active,
		// 		order
		// 	} = this
		// 	console.log(this.$refs['order' + order[active].type])
		// 	this.$refs['order' + order[active].type][0].getOrderListFun()
		// },
		methods: {
			changeShow(index) {
				let _this = this
				if (index != -1) {
					this.active = index
					this.order[index].isShow = true
				}
				let ontype = this.order[index].type
				console.log(ontype)

				if (ontype == "sub") {
					let data = {
						type: 0
					}
					ALLlists(data).then(res => {
						this.list = res.data
						for(var i=0;i<_this.list.length;i++){
							if(_this.list[i].cid==1){
								_this.list[i].type="抖音任务"	
							}else if (_this.list[i].cid==2){
								_this.list[i].type="西瓜任务"	
							}else if(_this.list[i].cid==3){
								_this.list[i].type="今日任务"
							}
						}
						console.log(this.list)
						
						// for (var i = 0; i < _this.list.length; i++) {
						// 	let timestamp = new Date().getTime();
						// 	let newtime = timestamp / 1000
						// 	// console.log(newtime)
						// 	// console.log(_this.list[i].end_time)
						// 	let ctime = _this.list[i].end_time - newtime
						// 	let hstime = Math.floor(ctime)
						// 	_this.list[i].time = hstime
						// 	console.log(timeToDate(_this.list[i].end_time))
						// }
					}, err => {})
				}
				if (ontype == "examine") {
					let data = {
						type: 1
					}
					ALLlists(data).then(res => {
						
						this.list = res.data
					}, err => {})
				}
				if (ontype == "adopt") {
					let data = {
						type: 2
					}
					ALLlists(data).then(res => {
						this.list = res.data
					}, err => {})
				}
				if (ontype == "Fail") {
					let data = {
						type: 3
					}
					ALLlists(data).then(res => {
						this.list = res.data
					}, err => {})
				}
			},
			toxq(title, price, order_sn, status) {
				uni.navigateTo({
					url: "../task-list/taskp-xq?title=" + title + "&price=" + price + "&order_sn=" + order_sn +
						"&status=" + status
				})
			},
			todetails(url, content, title, id, price, cid) {
				uni.navigateTo({
					url: "../sort/details?url=" + url + "&content=" + JSON.stringify(content) + "&title=" + JSON
						.stringify(title) + "&id=" + id + "&price=" + price + "&cid=" + cid
				})
			},
		}
	};
</script>
<style lang="less">
	// .all {
	// 	padding: 0 40rpx;

	// 	.list {
	// 		margin-top: 50rpx;
	// 		width: 100%;
	// 		height: 250rpx;
	// 		border-radius: 20rpx;
	// 		background-color: #FFFFFF;
	// 		padding: 30rpx 30rpx;

	// 		.list_top {
	// 			display: flex;

	// 			image {
	// 				width: 100rpx;
	// 				height: 100rpx;
	// 			}

	// 			.list_right {
	// 				width: 80%;
	// 				margin-left: 20rpx;

	// 				.ltop {
	// 					display: flex;
	// 					justify-content: space-between;
	// 				}

	// 				.lbot {
	// 					margin-top: 20rpx;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	.list {
		padding: 0 30rpx;
		margin-top: 20rpx;

		.lists {
			background: #FFFFFF;
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15rpx 15rpx 0 20rpx;

			image {
				width: 20%;
				width: 100rpx;
				height: 100rpx;
			}

			.task_text {
				width: 60%;

				.p1 {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 25rpx;
					color: #999999;
				}
			}
		}

		.type {
			padding: 0 80rpx;
			background-color: #f5fafe;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
